<template>
  <view
    class="content"
    :style="{
      'padding-top': height + 'px',
    }"
  >
    <view
      :style="{
        height: statusBarHeight + 'px',
      }"
    >
    </view>
    <!-- 头部 -->
    <view
      class="head"
      :style="{
        top: statusBarHeight + 'px',
        background: isHeadBack ? 'rgba(0,0,0,0.3)' : 'rgba(0,0,0,0)',
      }"
    >
      <view class="head_left">
        <u-icon
          name="arrow-left"
          color="#EEEEEE"
          size="24"
          :bold="true"
          @click="toBack"
        ></u-icon>
      </view>
      <view class="text">编辑信息</view>
      <view class="head_right" @click="goPage"> 保存 </view>
    </view>
    <!-- 主体 -->

    <scroll-view
      :style="{
        height: '100%',
      }"
      :scroll-y="true"
      class="scroll_view"
    >
      <view class="box">
        <view class="box_head">
          <view class="box_head_img" @click="show = true">
            <image :src="headImg" class="head_img"></image>
            <image
              src="@/static/images/my/icon_bjgrxx_shangchuantouxiang.png"
              class="head_img_icon"
            ></image>
          </view>
          <view class="box_head_img_title">上传您的头像</view>
        </view>

        <view class="box_item">
          <view class="box_item_title">昵称</view>
          <view class="box_item_form">
            <u--input
              placeholder="请输入昵称"
              border="none"
              v-model="nick_name"
              color="#ADADAD"
            ></u--input>
          </view>
        </view>
        <view class="box_item" @click="show1 = true">
          <view class="box_item_title">性别</view>
          <view class="box_item_sel">
            <view class="box_item_sel_text" v-if="sex === ''">点击选择</view>
            <view class="box_item_sel_text" v-else>{{ sexText }}</view>
            <image src="@/static/images/my/icon_bjgrxx_xuanze.png"></image>
          </view>
        </view>
        <view class="box_item" v-if="allShanList && allShanList.length > 0">
          <view class="box_item_title">山海名号（行者）</view>
          <view
            class="box_item_sel"
            v-for="(itemVal, ind) in allShanList"
            :key="ind"
            @click="showModFn(itemVal, ind)"
          >
            <view class="box_item_sel_text" v-if="selectArr[ind].id == 0"
              >点击选择</view
            >
            <view class="box_item_sel_text" v-else>{{
              selectArr[ind].name
            }}</view>
            <image src="@/static/images/my/icon_bjgrxx_xuanze.png"></image>
          </view>
        </view>
        <view class="box_item">
          <view class="box_item_title">个人介绍</view>
          <view class="box_item_form">
            <u--textarea
              v-model="introduce"
              placeholder="请填写个人介绍…"
              border="none"
              color="#ADADAD"
              maxlength="-1"
            ></u--textarea>
          </view>
        </view>
      </view>
    </scroll-view>
    <!-- 修改头像 -->
    <u-action-sheet
      :actions="locationList"
      cancelText="取消"
      @select="selectClick"
      :show="show"
      @close="show = false"
    ></u-action-sheet>
    <!-- 选择性别 -->
    <u-action-sheet
      :actions="sexList"
      cancelText="取消"
      @select="sexClick"
      :show="show1"
      @close="show1 = false"
    ></u-action-sheet>
    <!-- 山海弹框 -->
    <u-modal
      :show="showMod"
      title="选择山海名号"
      :showCancelButton="true"
      confirmColor="#55B877"
      :closeOnClickOverlay="true"
      @confirm="confirm"
      @cancel="showMod = false"
      @close="showMod = false"
      class="modal_view"
    >
      <view class="slot-content">
        <view
          class="slot_content_item"
          @click="changeShan(item)"
          v-for="(item, index) in shanList"
          :key="index"
        >
          <view class="slot_content_item_text">{{ item.name }}</view>
          <u-icon
            name="checkbox-mark"
            color="#55B877"
            size="20"
            v-show="item.clickAble == true"
          ></u-icon>
        </view>
        <!-- <view class="slot_content_item" @click="num = 2">
          <view class="slot_content_item_text">兰</view>
          <u-icon
            name="checkbox-mark"
            color="#55B877"
            size="20"
            v-show="num == 2"
          ></u-icon>
        </view>
        <view class="slot_content_item" @click="num = 3">
          <view class="slot_content_item_text">竹</view>
          <u-icon
            name="checkbox-mark"
            color="#55B877"
            size="20"
            v-show="num == 3"
          ></u-icon>
        </view>
        <view class="slot_content_item" @click="num = 4">
          <view class="slot_content_item_text">菊</view>
          <u-icon
            name="checkbox-mark"
            color="#55B877"
            size="20"
            v-show="num == 4"
          ></u-icon>
        </view> -->
      </view>
    </u-modal>
	<floatingBall></floatingBall>
  </view>
</template>
    
<script>
import config from "@/config"; // 配置文件
import storage from "@/common/storage.js"; // 缓存封装
export default {
  components: {},

  data() {
    return {
      statusBarHeight: 0,
      height: 0,
      isHeadBack: false,
      form: {
        name: "",
        textarea: "",
        shan: "",
        sex: "",
      },
      locationList: [
        {
          name: "拍照",
        },
        {
          name: "从相册",
        },
      ],
      sexList: [
        {
          name: "保密",
          value: 0,
        },
        {
          name: "男",
          value: 1,
        },
        {
          name: "女",
          value: 2,
        },
      ],
      show: false,
      show1: false,
      showMod: false,
      value: "",
      num: "",
      headImg: "",
      user: "",
      avatar: "",
      name_alias: 0,
      name_alias_text: "",
      allShanList: [],
      shanList: [],
      selectArr: [
        {
          id: 0,
          name: "请选择",
        },
        {
          id: 0,
          name: "请选择",
        },
        {
          id: 0,
          name: "请选择",
        },
        {
          id: 0,
          name: "请选择",
        },
        {
          id: 0,
          name: "请选择",
        },
      ],
      selectIndex: 0,
      introduce: "",
      nick_name: "",
      sex: "",
      sexText: "",
      user_id: "",
    };
  },
  onLoad(options) {
    this.user_id = options.user_id;
  },
  async created() {
    const statusBarHeight = uni.getSystemInfoSync(); // 获取手机状态栏高度

    this.statusBarHeight = statusBarHeight.statusBarHeight;
    this.$nextTick(() => {
      uni
        .createSelectorQuery()
        .select(".head")
        .boundingClientRect((data) => {
          this.height = data.height;
        })
        .exec();
    });
    await this.getShanList();
    await this.getDetail();
  },
  methods: {
    toBack() {
      uni.navigateBack({
        delta: 1,
      });
    },
    selectClick(a) {
      let that = this;
      // this.form.sex = a.name
      console.log(a.name);
      if (a.name == "拍照") {
        // 拍照
        uni.chooseImage({
          count: 1, //默认9
          sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
          sourceType: ["camera "], //从相册选择
          success: function (res) {
            // console.log(JSON.stringify(res.tempFilePaths));
          },
        });
      } else {
        // 从相册
        uni.chooseImage({
          count: 1, //默认9
          sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
          sourceType: ["album"], //从相册选择
          success: function (res) {
            console.log(res.tempFilePaths);
            // console.log(res.tempFiles);
            that.uploadFn(res.tempFilePaths[0]);
          },
        });
      }
      // this.show = false;
    },
    sexClick(a) {
      console.log(a);
      this.show1 = false;
      this.sex = a.value;
      this.sexText = a.name;
    },
    confirm() {
      for (let i = 0; i < this.shanList.length; i++) {
        if (this.shanList[i].clickAble == true) {
          // this.name_alias = this.shanList[i].id
          // this.name_alias_text = this.shanList[i].name
          console.log(this.shanList[i]);
          this.selectArr[this.selectIndex] = {
            id: this.shanList[i].id,
            name: this.shanList[i].name,
          };
        }
      }
      console.log(this.selectArr, "已选的数组");
      this.showMod = false;
    },
    showModFn(itemVal, ind) {
      console.log(itemVal, "当前列表");
      let arr = JSON.parse(JSON.stringify(itemVal));
      this.selectIndex = ind;

      arr.unshift({
        id: 0,
        name: "请选择",
      });
      this.shanList = arr;
      this.showMod = true;
    },
    goPage() {
      // uni.$u.toast("保存成功");
      // uni.$u.toast("保存失败，请重试");
      // uni.$u.toast("您还不是会员，不能进行选择");
      this.subPerSonal();
    },
    // 文件上传
    uploadFn(file) {
      let token = storage.get("token");
      uni.uploadFile({
        url: config.uni_app_web_api_url + "/api/upload/image", // 仅为示例，非真实的接口地址
        filePath: file,
        name: "file",
        header: {
          "Access-Token": token,
        },

        success: (res) => {
          console.log(JSON.parse(res.data));
          let data = JSON.parse(res.data);
          console.log("成功");
          this.headImg = data.data.fileInfo.external_url;
          this.avatar = data.data.fileInfo.file_id;
        },
        fail: function (res) {
          console.log("失败");
        },
      });
    },
    // 获取个人信息
    getDetail() {
      this.$http
        .userZhuye({ user_id: this.user_id })
        .then((res) => {
          let data = res.data.info;
          this.user = data.user;
          this.headImg = data.user.avatar_url;
          this.name_alias = data.user.name_alias;
          // console.log(data,'山海名号id')
          // 山海名号回显

          let shanhaiArr = this.user.name_alias.split(",");
          console.log(shanhaiArr, "山海名号字符串");
          if (this.allShanList.length > 0) {
            for (let i = 0; i < shanhaiArr.length; i++) {
              for (let j = 0; j < this.allShanList[i].length; j++) {
                if (shanhaiArr[i] == this.allShanList[i][j].id) {
                  this.selectArr[i].id = this.allShanList[i][j].id;
                  this.selectArr[i].name = this.allShanList[i][j].name;
                  console.log(this.allShanList[i][j].name);
                }
              }
            }
          }

          // for (let i = 0; i < this.shanList.length; i++) {
          //   if(this.shanList[i].id == data.user.name_alias){
          //     this.shanList[i].clickAble = true
          //     this.name_alias_text = this.shanList[i].name
          //   }
          // }
          this.introduce = data.user.introduce;
          this.nick_name = data.user.nick_name;
          this.sexText = data.user.sex;
          if (data.user.sex == "保密") {
            this.sex = 0;
          } else if (data.user.sex == "男") {
            this.sex = 1;
          } else if (data.user.sex == "女") {
            this.sex = 2;
          }
          console.log(data, "用户主页");
        })
        .catch((error) => {
          uni.$u.toast(error);
        });
    },
    // 获取山海名号
    getShanList() {
      this.$http
        .userNameAlias({})
        .then((res) => {
          let data = res.data.list;
          this.allShanList = data;
          // for (let i = 0; i < this.shanList.length; i++) {
          //   this.shanList[i].clickAble = false;
          // }
          // this.headImg = data.user.avatar_url
          // for (let i = 0; i < this.shanList.length; i++) {}
          // console.log(data, "山海名号选项");
        })
        .catch((error) => {
          uni.$u.toast(error);
        });
    },
    // 选择山海名号
    changeShan(item) {
      this.$forceUpdate();
      for (let i = 0; i < this.shanList.length; i++) {
        this.shanList[i].clickAble = false;
      }
      item.clickAble = true;
      // this.showMod = false
    },
    // 编辑信息
    subPerSonal() {
      let arr = [];
      for (let i = 0; i < this.selectArr.length; i++) {
        arr.push(this.selectArr[i].id);
      }
      this.name_alias = arr.join(",");
      this.$http
        .userPersonal({
          avatar: this.avatar,
          name_alias: this.name_alias,
          introduce: this.introduce,
          nick_name: this.nick_name,
          sex: this.sex,
        })
        .then((res) => {
          console.log(res, "提交编辑");
          uni.$u.toast(res.message);
          setTimeout(() => {
            uni.navigateBack({
              delta: 1,
            });
          }, 1000);
        })
        .catch((error) => {
          uni.$u.toast(error);
        });
    },
  },
};
</script>
    
    <style scoped lang="scss">
.content {
  // background: #F7F8FA;
  box-sizing: border-box;
  background: url("/static/images/index.png") no-repeat;
  background-size: 100% 100%;
  background-attachment: fixed;
  z-index: -10;
  display: flex;
  flex-direction: column;
}
.scroll_view {
  height: 100%;
}
.head {
  width: 100%;
  padding: 18rpx 30rpx 47rpx;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  z-index: 99;
  background: #ffffff;
  .head_left {
    position: absolute;
    left: 30rpx;
  }

  .head_right {
    position: absolute;
    right: 30rpx;
    color: #55b877;
    font-size: 30rpx;
  }

  .text {
    font-size: 36rpx;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: 400;
    color: #eeeeee;
  }
}
.box {
  padding: 38rpx;
  box-sizing: border-box;
  .box_head {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .box_head_img {
      width: 222rpx;
      height: 222rpx;
      position: relative;
      .head_img {
        width: 222rpx;
        height: 222rpx;
        border-radius: 50%;
      }
      .head_img_icon {
        width: 60rpx;
        height: 60rpx;
        position: absolute;
        right: 0;
        bottom: 0;
      }
    }
    .box_head_img_title {
      margin-top: 32rpx;
      color: #adadad;
      font-size: 30rpx;
    }
  }
  .box_item {
    margin-bottom: 40rpx;
    .box_item_title {
      font-size: 30rpx;
      color: #ffffff;
    }
    .box_item_form {
      background: rgba(39, 39, 39, 0.5);
      border-radius: 16rpx;
      margin-top: 16rpx;
      padding: 22rpx 32rpx;
      /deep/.uni-input-placeholder {
        color: #adadad !important;
      }
      /deep/ .uni-textarea-placeholder {
        color: #adadad !important;
      }
      /deep/.u-textarea {
        background: none;
        padding: 0;
        textarea {
          color: #adadad;
        }
      }
    }
    .box_item_sel {
      padding: 22rpx 32rpx;
      background: rgba(39, 39, 39, 0.5);
      border-radius: 16rpx;
      margin-top: 16rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .box_item_sel_text {
        font-size: 30rpx;
        color: #adadad;
      }
      image {
        width: 30rpx;
        height: 30rpx;
      }
    }
  }
}
/deep/.modal_view {
  .u-modal__content {
    padding: 0 !important;
  }
  .slot-content {
    width: 100%;
    overflow: auto;
    height: 400rpx;
  }
  .slot_content_item {
    padding: 32rpx 40rpx;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    border-bottom: 1rpx solid #e5e5e5;
    .slot_content_item_text {
      font-size: 32rpx;
      color: #272727;
    }
  }
}
</style>